<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="queryParams.roleName"
          size="small"
          style="width: 240px"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click.native="getData">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click.native="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="width: 650px">
      <el-collapse v-model="activeName" accordion @change="changeCollapse">
        <el-collapse-item
          v-for="(r, index) in roleData"
          :name="r.roleId + '_' + index"
          :key="index"
        >
          <template slot="title">
            <el-tag>{{ r.roleName }}</el-tag>
            <span style="font-size: 10px; margin-left: 5px; color: #999">
              {{ r.instruction }}
            </span>
          </template>
          <el-card class="box-card" :key="index">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
            </div>
            <div>
              <el-tree
                :data="menuOptions"
                :props="defaultProps"
                show-checkbox
                node-key="navId"
                ref="tree"
                :key="index"
                empty-text="加载中，请稍候"
              ></el-tree>
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  margin-top: 5px;
                "
                v-if="r.roleLevel != 0"
              >
                <el-button size="mini" @click.native.stop="cancelUpdate">
                  取消修改
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click.native.stop="doUpdate(r.roleId, r.roleName, index)"
                >
                  确认修改
                </el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoleSetting',
  data() {
    return {
      queryParams: {
        roleName: undefined,
      },
      activeName: -1,
      roleData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 菜单列表
      menuOptions: [],
      // 选中的菜单
      selectMenus: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 重置
    resetQuery() {
      this.queryParams.roleName = undefined;
      this.getData();
    },
    // 修改
    doUpdate(roleId, roleName, index) {
      let checkedKeys = this.getMenuAllCheckedKeys(index)
      let params = {
        roleId: roleId,
        roleName: roleName,
        navIds: checkedKeys,
      }
      this.putRequest('/manage/roleSetting/', params).then((resp) => {
        if (resp) {
          this.activeName = -1
          this.$nextTick(() => {
            this.menuOptions = []
          })
        }
      })
    },
    // 获取所有选中的菜单节点数据
    getMenuAllCheckedKeys(index) {
      // 被选中的菜单节点
      let checkedKeys = this.$refs.tree[index].getCheckedKeys()
      // 被半选中的菜单节点
      let halfCheckedKeys = this.$refs.tree[index].getHalfCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    // 取消修改
    cancelUpdate() {
      this.activeName = -1
      this.$nextTick(() => {
        this.menuOptions = []
      })
    },
    changeCollapse(name) {
      if (name) {
        let roleId = name.split('_')[0]
        let index = name.split('_')[1]
        this.getRequest(`/manage/roleSetting/${roleId}`).then((resp) => {
          if (resp) {
            this.menuOptions = resp.data.menus
            let checkedKeys = resp.data.checkedKeys
            checkedKeys.forEach((key) => {
              this.$nextTick(() => {
                this.$refs.tree[index].setChecked(key, true, false)
              })
            })
          }
        })
      } else {
        this.$nextTick(() => {
          this.menuOptions = []
        })
      }
    },
    getData() {
      this.getRequest('/manage/roleSetting/list/all', this.queryParams).then((resp) => {
        if (resp) {
          this.roleData = resp.data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
